<template>
  <div class="peolist">
    <el-card class="box-card1">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item label="使用单位:">
          <el-input v-model="formInline.useOrgName"></el-input>
        </el-form-item>
        <el-form-item label="设备注册代码:">
          <el-input v-model="formInline.eleCode"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="gettableDta" size="small">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" style="margin-top:15px">
      <div slot="header" class="clearfix">
        <div>
          <p>电梯总数:<span style="color:red;margin:0 5px">{{eleNum}}</span> 使用单位数量:<span style="color:red;margin:0 5px">{{useOrgNum}}</span></p>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 
      fontWeight:800}">
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column label="设备注册代码">
          <template slot-scope="scope">
            <div @click="infoClick(scope.row.eleCode)" style="color:#0090EC;cursor: pointer;">{{scope.row.eleCode}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="workerFirstName" label="人梯绑定责任人">
        </el-table-column>
        <!-- <el-table-column prop="workerSecondName" label="人梯绑定责任人B">
        </el-table-column> -->
        <el-table-column prop="useOrgName" label="使用单位名称" width="320">
        </el-table-column>
        <el-table-column prop="eleUseCommunity" label="设备安装地址" width="320">
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pagination.pageNum"
        :page-size="pagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.pageTotal">
      </el-pagination>
    </el-card>
    <LeftDetails ref="LeftDetails" />
  </div>
</template>

<script>
import { getselectEleBindList } from '@/api/elevator'
import LeftDetails from './components/leftdetails.vue'
export default {
  components: {
    LeftDetails
  },
  data () {
    return {
      pagination: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      formInline: {
      },
      tableData: [],
      eleNum:'',
      useOrgNum:''
    }
  },
  mounted () {
    this.gettableDta()
  },
  methods: {
    gettableDta () {
      const query = {
        eleCode: this.formInline.eleCode,
        useOrgName: this.formInline.useOrgName,
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
      }
      getselectEleBindList(query).then(res => {
        if (res.data.code == '200') {
          this.tableData = res.data.data.page.list
          this.pagination.pageTotal = res.data.data.page.total
          this.eleNum = res.data.data.eleNum
          this.useOrgNum = res.data.data.useOrgNum
        }
      })
    },
    handleSizeChange (val) {
      this.pagination.pageNum = 1
      this.pagination.pageSize = val
      this.gettableDta()
    },
    handleCurrentChange (val) {
      this.pagination.pageNum = val
      this.gettableDta()
    },
    infoClick (eleCode) {
      this.$refs.LeftDetails.dialogVisible1 = true
      this.$refs.LeftDetails.eleCode = eleCode
      this.$refs.LeftDetails.getPageData()
    }
  }
}

</script>
<style lang='less' scoped>
.el-pagination {
  margin-top: 5px;
  text-align: right;
}
::v-deep .el-form-item__label {
  font-weight: bold;
}
.peolist {
  .clearfix {
    font-weight: bold;
  }

}
</style>